<template>
    <div class='right-container'>
        <HeaderStudent class="header" :headerList="headerList"></HeaderStudent>
        <div class="right-content white-color">
            <div class="title">
                <img src="../../src/assets/img/welcome/star.png" alt="" class='star'>
                <span>数学</span>
            </div>
            <div class="content">
                <div class="title-course">
                    <span>第三讲</span>
                    <span>奥数的秘密</span>
                    <span class='green-color'>课程回放</span>
                </div>
                <div class="class-name">班级名称：奥数的秘密突击一班</div>
                <div class="class-time">
                    <i class="el-icon-date"></i>
                    <span class="span-margin">2019-11-09 12:00至2019-12-08 13:00</span>
                    <i class="el-icon-time"></i>
                    <span class="span-margin"> 12:30-13:30</span>
                    <img src="../../src/assets/img/welcome/greyPerson.png" alt="">
                    <span>讲师: </span>
                    <span class="margin-20"> 小王</span>
                    <img src="../../src/assets/img/welcome/greyPerson.png" alt="">
                    <span>助教: </span>
                    <span> 小王</span>
                </div>
                <div class="class-show">
                    <div class="left">
                        <div class="topic-title"><span>单选题</span></div>
                        <div class="topic-content">
                            <div>3. 小明走了100步，小王走了300步，小李走了19981步，请问小明加小李一共走了()步？</div>
                            <div class="topic-img">
                                <img src="../../src/assets/img/welcome/topic.png" alt="">
                            </div>
                            <div class="answer">
                                <span>A、100步</span>
                                <span>B、200步</span>
                                <span>C、300步</span>
                                <span>D、400步</span>
                            </div>
                            <div class="true-answer">
                                <span>
                                    答案：
                                    <span class="line">
                                        <input type="text" v-model="answer">
                                    </span>
                                </span>
                            </div>
                            <div class="foot-img">
                                <div><img src="../../src/assets/img/welcome/prevTopic.png" alt=""><span
                                        class="prev">上一题</span></div>
                                <div><img src="../../src/assets/img/welcome/nextTopic.png" alt=""><span
                                        class="next">下一题</span></div>
                                <div><img class="resetImg" src="../../src/assets/img/welcome/reset.png" alt=""><span
                                        class="reset">重置</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="test-title">习题测试</div>
                        <div class="status">
                            <div v-for="(item,index) in titleNum"
                                 :key="index"
                                 :class="{lightOrange: item.status === 'lightColor', orange: item.active === 'true', borderColor: item.status === 'borderColor'}">
                                 {{item.index}}
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HeaderStudent from '../../src/components/HeaderStudent'
export default {
    name: 'home',
    data() {
        return {
            headerList: [{
                name: '在线课堂',
                path: '/studentMange'
            }, {
                name: '学小思教育',
                path: '/studentMange'
            }],
            openeds: ['5', '5-2'],
            titleNum: [{
                index: 1,
                status: 'lightColor'
            },
            {
                index: 2,
                status: 'lightColor'
            },
            {
                index: 3,
                status: 'true',
                active: 'true'
            },
            {
                index: 4,
                status: 'borderColor'
            },
            {
                index: 5,
                status: 'borderColor'
            },
            {
                index: 6,
                status: 'borderColor'
            },
            {
                index: 7,
                status: 'borderColor'
            },
            {
                index: 8,
                status: 'borderColor'
            },
            {
                index: 9,
                status: 'borderColor'
            },
            {
                index: 10,
                status: 'borderColor'
            }

            ],
            answer: 'B'
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        }
    },
    components: {
        HeaderStudent
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .right-content {
        padding-bottom: 12px;

        .title {
            width: 100%;
            height: 56px;
            border-bottom: solid 2px #E8E9EA;
            line-height: 56px;

            img {
                margin-left: 24px;
                margin-right: 4px;
                position: relative;
                top: 2px;

            }
        }

        .topic-title {
            height: 50px;
            line-height: 50px;
            margin-left: 10px;
            position: relative;
            font-size: 14px;
            font-family: PingFang-SC-Regular;
            font-weight: 500;
            color: rgba(72, 87, 106, 1);

            &::before {
                height: 12px;
                width: 2px;
                content: "";
                background: rgba(83, 204, 144, 1);
                position: absolute;
                left: 0px;
                top: 38%;
                display: inline-block;
            }

            span {
                margin-left: 10px;
            }
        }

        .topic-content {
            /*padding-left: 20px;*/
            font-size: 14px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(72, 87, 106, 1);

            >div {
                padding-left: 20px;
            }

            .topic-img {
                margin-top: 16px;
                height: 250px;
                margin-bottom: 11px;

                img {
                    height: 250px;
                }
            }

            .true-face {
                margin: 18px 0px;

                img {
                    width: 70px;
                    height: 24px;
                }
            }

            .answer {
                margin-bottom: 20px;

                span {
                    margin-right: 46px;
                }

            }

            .true-answer {
                margin-bottom: 16px;

                >span {
                    margin-right: 66px;
                }
            }

            .line {
                /*padding-left: 10px;*/
                /*padding-right: 40px;*/
                border-bottom: solid 1px rgba(153, 153, 153, 1);
                font-weight: 500;
                padding-bottom: 2px;

                input {
                    width: 70px;
                    border: none;
                    outline: none;
                    box-shadow: none;
                    font-size: 14px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(96, 98, 102, 1);
                    padding-left: 5px;
                }
            }
        }

        .content {
            width: calc(100% - 30px);
            padding-left: 30px;
            margin: auto;
            height: calc(100% - 60px);

            .class-name,
            .class-time {
                color: rgba(153, 153, 153, 1);
                margin-bottom: 10px;
                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;

                img {
                    width: 18px;
                    height: 18px;
                    position: relative;
                    top: 5px;
                }

                .span-margin {
                    margin-right: 40px;
                }

                .margin-20 {
                    margin-right: 20px;
                }
            }

            .title-course {
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-family: PingFang-SC-Regular;
                font-weight: 500;
                color: rgba(78, 84, 108, 1);

                span {
                    margin-right: 12px
                }

                .green-color {
                    width: 81px;
                    height: 24px;
                    background: rgba(171, 240, 206, 0.34);
                    border-radius: 2px;
                    border: 1px solid rgba(83, 204, 144, 0.36);
                    font-size: 14px;
                    font-family: PingFang-SC-Regular;
                    font-weight: 400;
                    padding: 1px 12px;
                    cursor: pointer;
                    color: rgba(83, 204, 144, 1);
                }
            }

            .inner {
                .flex(row, space-between, center, nowrap);

                >span {
                    margin-right: 22px;
                    font-size: 14px;
                    font-family: PingFang-SC-Regular;
                    font-weight: 400;
                    color: rgba(72, 87, 106, 1);
                }
            }

            .class-show {
                width: 100%;
                min-width: 980px;
                // min-height: 570px;
                height: calc(100% - 119px);
                border-radius: 2px;
                margin-top: 20px;

                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(96, 98, 102, 1);
                .flex(row, space-between, top, nowrap);

                .left {
                    width: 70%;
                    border-radius: 4px 0px 0px 0px;
                    border: 1px solid rgba(246, 246, 246, 1);
                    position: relative;
                }

                .right {
                    width: 30%;
                    background: rgba(250, 250, 250, 1);
                    height: 100%;

                    .status {
                        .flex(row, left, top, wrap);

                        padding-left: 35px;

                        .lightOrange,
                        .orange,
                        .borderColor {
                            width: 30px;
                            height: 30px;
                            border-radius: 15px;
                            /*background: rgba(83, 204, 144, 1);*/
                            color: rgba(255, 255, 255, 1);
                            line-height: 30px;
                            text-align: center;
                            margin-right: 24px;
                            margin-top: 20px
                        }

                        .lightOrange {
                            /*background-color: #FF5B3D*/
                            background: rgba(255, 171, 43, 0.6);
                        }

                        .orange {
                            background: rgba(255, 171, 43, 1);
                            box-shadow: 0px 4px 8px 0px rgba(255, 171, 43, 0.38);
                        }

                        .active {
                            box-shadow: 0px 4px 8px 0px rgba(83, 204, 144, 0.62);
                        }

                        .borderColor {
                            border: 1px solid rgba(255, 171, 43, 1);
                            color: rgba(255, 171, 43, 1)
                        }

                        div {
                            cursor: pointer;
                        }
                    }

                    .showTest {
                        margin: auto;
                        width: calc(100% - 87px);
                        /*height: calc(100% - 275px);*/
                        margin-top: 40px;
                        height: 142px;

                        img {
                            /*width: 200px;*/
                            /*height: 142px;*/
                            /*width: calc(100% - 87px);*/
                            /*height: calc(100% - 275px);*/
                            width: 100%;
                            height: 142px;
                        }

                        margin-bottom: 20px;
                    }

                    .showResult {
                        width: calc(100% - 147px);
                        height: calc(100% - 470px);
                        /*min-height: 70px;*/
                        background-size: 100%;
                        background: url('../../src/assets/img/welcome/circleLIne.png') center bottom no-repeat;
                        margin: auto;
                        margin-top: 15px;
                        text-align: center;

                    }

                    .test-title {
                        font-size: 14px;
                        font-family: PingFang-SC-Regular;
                        font-weight: 500;
                        color: rgba(96, 98, 102, 1);
                        height: 50px;
                        line-height: 50px;
                        padding-left: 30px;
                    }

                    .trueRax {
                        font-size: 20px;
                        font-family: PingFang-SC-Regular;
                        font-weight: 500;
                        color: rgba(255, 255, 255, 1);
                        margin: 10px 0px;
                        padding-top: 10px;
                    }

                    .trueRax+div {
                        font-size: 12px;
                        font-family: PingFang-SC-Regular;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }

                }

            }

            .foot-img {
                margin-top: 110px;
                height: 70px;
                border-top: 1px solid rgba(246, 246, 246, 1);
                .flex(row, space-between, center, nowrap);
                bottom: 0px;
                position: absolute;
                width: calc(100% - 220px);
                padding-right: 110px;
                padding-left: 110px;

                >div {
                    /*margin-top: 100px;*/
                    position: relative;
                    width: 110px;
                    height: 38px;
                    top: 3px;

                    img {
                        width: 110px;
                        height: 38px;
                        cursor: pointer;
                    }

                    span {
                        position: absolute;
                        left: 43px;
                        top: 7px;
                        font-size: 14px;
                        font-family: PingFang-SC-Regular !important;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }

                    .prev {
                        left: 43px;
                    }

                    .next {
                        left: 22px;
                    }

                    .reset {
                        left: 22px;
                        color: rgba(96, 98, 102, 1);
                    }

                    .resetImg {
                        height: 33px;
                    }

                }
            }
        }
    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    .star {
        width: 15px;
        height: 15px;
        background: rgba(255, 171, 43, 1);
        border-radius: 1px;
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular;
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
